<!-- 用户列表页面 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白色内容面板区 -->
    <div class="page_content">
      <!-- 新增用户 -->
      <div class="input_box">
        <el-button type="primary" @click="addUser">新增用户</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="page.records" border>
        <!-- 编号 -->
        <el-table-column prop="id" label="编号" width="180" align="center">
        </el-table-column>
        <!-- 头像 -->
        <el-table-column
          prop="icon"
          label="头像"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.icon" width="50" height="50" />
          </template>
        </el-table-column>
        <!-- 用户名 -->
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
          align="center"
        >
        </el-table-column>
        <!-- 类型 -->
        <el-table-column label="类型" width="180" align="center">
          <template slot-scope="props">
            {{ toType(props.row.type) }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="right">
          <template>
            <el-button type="primary">Edit</el-button>
            <el-button type="danger"> <i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="flex_right"
        background
        layout="prev, pager, next"
        :total="page.total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="新增用户" :visible.sync="dialogVisible" width="50%">
      <!-- 表单 -->
      <!-- 头像 -->
      <!-- 密码 -->
      <!-- 用户类型 -->
      <el-form v-model="formData">
        <el-upload
          class="avatar-uploader"
          action="http://114.116.112.52:8080/user/header"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <img
            v-if="formData.icon"
            :src="
              formData.icon
            "
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <!-- 用户名 -->
        <el-form-item label="用户名">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>

        <!-- 用户类型 -->
        <el-form-item label="用户角色">
          <el-select v-model="formData.type" placeholder="请选择用户角色">
            <el-option label="顾客" value="0"></el-option>
            <el-option label="服务员" value="1"></el-option>
            <el-option label="厨师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="flex_right">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="sureButton()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { UsersListApi } from "@/util/request";
import { registerApi } from "@/util/usersApi";

export default {
  name: "UsersList",

  data() {
    return {
      // 分页数据
      page: {
        records: [],
        total: 1,
        current: 1,
      },
      dialogVisible: false,

      // 新增的数据
      formData: {
        icon: "",
        username: "",
        password: "",
        type: "",
      },
    };
  },

  methods: {
    // 显示搜索用户
    searchList(val) {
      UsersListApi({ current: val }).then((res) => {
        if (res.data) {
          this.page = res.data.data;
          console.log("用户数据", this.page);
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.formData.icon = res.data.icon;
      console.log(this.formData.icon);
    },

    // 确认按钮
    sureButton() {
      console.log(this.formData);
      registerApi(this.formData).then((res) => {
        if (res.data) {
          console.log("添加信息", res.data);
        }
      });
      this.dialogVisible = false;
      
    },

    // 关闭按钮
    close() {
      this.dialogVisible = false;
    },

    // 新增用户按钮
    addUser() {
      this.dialogVisible = true;
    },

    // 换页
    handleCurrentChange(val) {
      this.searchList(val);
    },

    // 转换
    toType(val) {
      switch (val) {
        case 0:
          return "顾客";
        case 1:
          return "服务员";
        case 2:
          return "厨师";
        case 3:
          return "管理员";
      }
    },
  },

  mounted() {
    this.searchList();
  },
};
</script>

<style>

.page_content {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 20px;
  background: white;
  margin-top: 30px;
}
/* 图片样式 */
.input_box {
  display: flex;
  justify-content: right;
  margin-bottom: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>